<template>
	<view>
		<!-- <text>manager</text> -->

		<!-- <text user-select="true">text:{{textarea}}</text> -->
		<!-- <text user-select="true">tableData:{{tableData}}</text> -->

		<!-- Form 表单 -->
		<uni-forms ref="form" :modelValue="baseFormData" label-width="80px" border label-align="right">
			<uni-forms-item label="選擇環境" required>
				<uni-data-checkbox v-model="baseFormData.env" :localdata="formData.env" @change="change_checkbox"
					mode="tag" />
			</uni-forms-item>

			<uni-forms-item label="立即更新" required>
				<uni-data-checkbox v-model="multijobData.UPDATE" :localdata="formData.update" mode="tag" />
			</uni-forms-item>

			<uni-forms-item label="選擇分支" required>
				<uni-data-select v-model="multijobData.BRANCH" :localdata="formData.branch"
					@change="change_select"></uni-data-select>
			</uni-forms-item>

			<uni-forms-item label="自定分支" required>
				<uni-easyinput v-model="multijobData.BRANCH" placeholder="请输入分支號"></uni-easyinput>
			</uni-forms-item>

		</uni-forms>


		<!-- 獲取 jenkins 項目列表 -->
		<!-- <button @click="getTableData(baseFormData.env, pageSize, pageCurrent, 'manual')">重新获取项目列表</button> -->

		<!-- 以下是列表 -->
		<view class="uni-container">
			<uni-table ref="tableRef" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<!-- <uni-th width="100%" align="center">ID</uni-th> -->
					<uni-th width="260px" align="center">項目名称</uni-th>
					<uni-th width="210px" align="center" :sortable="true" @sort-change="sortChange">分支</uni-th>
					<!-- <uni-th width="200px" align="center" :sortable="true">分支</uni-th> -->
				</uni-tr>
				<uni-tr v-for="(item, index) in resData.results" :key="index">
					<!-- <uni-td>{{ item.date }}</uni-td> -->
					<uni-td>
						<view class="name">{{ item.server_name }}</view>
					</uni-td>
					<uni-td>
						<view class="name">{{ item.branch_name }}</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
					:total="total" @change="change" /></view>
		</view>

		<!-- <a>{{baseFormData.env}}</a> -->
		<!-- <a>{{baseFormData.update}}</a> -->
		<button class="button" @click="commitBuild"
			:disabled="this.multijobData.BRANCH ==='' || this.multijobData.srv_list.length === 0">提交構建</button>
		<!-- <a>this.multijobData： {{multijobData}}</a> -->

	</view>


</template>

<script>
	export default {
		data() {
			return {
				tableRef: null,
				// 表格啟用排序
				// th_sortable: true,
				textarea: [],
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				resData: {
					total_pages: 0,
					count: 0,
					current_page: 1,
					next: true,
					results: []
				},
				// 用于请求接口时是否指定哪个环境
				envName: 'test-r',
				// 基础表单数据
				baseFormData: {
					env: 'test-r',
					// update: 'no',
					// branch: '',
				},
				// 数据源
				formData: {
					env: [{
						text: 'test-r',
						value: 'test-r'
					}, {
						text: 'test-s',
						value: 'test-s'
					}, {
						text: 'None',
						value: 'dev-r'
					}],
					update: [{
						text: 'no',
						value: 'no'
					}, {
						text: 'yes',
						value: 'yes'
					}],
					branch: [{
						"value": 0,
						"text": "篮球运动",
						"disable": true
					}, {
						"value": 6,
						"text": "乒乓球运动"
					}, {
						"value": 7,
						"text": "保龄球运动"
					}],
				},
				multijobData: {
					"srv_list": [],
					"BRANCH": "",
					"UPDATE": "no"
				},
				selectedIndexs: [],
				// message 彈窗
				type: 'center',
				msgType: 'success',
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log("option.id: ", option.id); //打印出上个页面传递的参数。
			console.log("option.name: ", option.name); //打印出上个页面传递的参数。
		},
		methods: {
			sortChange(e) {
				console.log("sortChange: ", e)
			},
			getTableData(para_env, para_pagesize, para_page, action) {
				// 手動點擊獲取項目列表時，當前頁要重置為 1 不然會出現只有一頁卻當前頁不是 1 的情況
				if (action === 'manual') {
					this.pageCurrent = 1
					para_page = 1
				}

				// 這個參數是在使用 test-r、test-s 獲取項目列表時，會在前端過濾掉 branch_name 為 master 的項目,
				// 如果還走後端接口的分頁，會出現每頁只有幾條甚至空頁的情況，所以過濾了分支就直接在一個頁面上顯示所有項目
				let pageSize = 0
				if (para_env != 'dev-r') {
					this.pageSize = 50
					pageSize = 50
				} else {
					this.pageSize = 10
					pageSize = 10
				}
				// console.log("调用接口：", para_env, para_pagesize, para_page)
				uni.request({
					url: 'https://ops.edccmss.cn/apis/jenkins/multijobbuildprod/',
					method: 'GET',
					data: {
						env: para_env,
						page_size: pageSize,
						page: para_page
					},
					// sslVerify: false,
					success: (res) => {
						// console.log(res.data)
						this.pageCurrent = parseInt(res.data.current_page)
						this.total = res.data.count
						this.resData = res.data
						// 在使用 test-r、test-s 獲取項目列表時，將分支為 master 的項目過濾掉，只保留有配分支的項目
						if (para_env != 'dev-r') {
							let tempDate = []
							res.data.results.forEach((item, index) => {
								if (item.branch_name != 'master') {
									tempDate.push(item)
								}
							});
							this.resData.results = tempDate
							this.total = this.resData.results.length
						}
					},
					fail: (res) => {
						console.log(res.errMsg)
						this.textarea = res.errMsg
					},
					complete: (res) => {
						console.log('complete')
					}
				})
			},
			funcTest() {
				uni.request({
					url: 'https://ops.edccmss.cn/apis/jenkins/lastbranchinfo/',
					method: 'GET',
					data: {
						env: 'dev-r',
					},
					// sslVerify: false,
					success: (res) => {
						this.textarea = res.data
					},
					fail: (res) => {
						console.log(res.errMsg)
					},
					complete: (res) => {
						console.log('complete')
					}
				})
			},
			// 獲取最近 6 個最新的分支名
			branchList() {
				uni.request({
					url: 'https://ops.edccmss.cn/apis/jenkins/latestbranch/',
					method: 'GET',
					// data: {
					// 	env: 'dev-r',
					// },
					// sslVerify: false,
					success: (res) => {
						this.formData.branch = []
						for (var index = 0; index < res.data.data.length; index++) {
							this.formData.branch.push({
								value: res.data.data[index].branch_name,
								text: res.data.data[index].branch_name
							});
						}
						// console.log("this.formData.branch", this.formData.branch)
					},
					fail: (res) => {
						console.log(res.errMsg)
						this.textarea = res.errMsg
					},
					complete: (res) => {
						console.log('complete')
					}
				})
			},
			// 提交構建
			commitBuild() {
				uni.request({
					url: 'https://ops.edccmss.cn/apis/jenkins/multijobbuildprod/',
					method: 'POST',
					data: this.multijobData,
					// sslVerify: false,
					success: (res) => {
						// console.log("提交構建成功", res.data)
						this.messageToggle(res.data.type, "提交構建成功")
					},
					fail: (res) => {
						console.log(res.errMsg)
						this.messageToggle(res.data.type, res.data.message)
					},
					complete: (res) => {
						console.log('complete')
					}
				})
			},
			// 多选处理
			selectedItems() {
				if (this.selectedIndexs) {
					return this.selectedIndexs.map(i => this.resData.results[i])
				}
				return
			},
			// 多选
			selectionChange(e) {
				// console.log(e.detail.index)
				console.log("selectionChange: ", e)
				console.log("tableRef: ", this.tableRef)
				this.selectedIndexs = e.detail.index
				this.selectionData()
			},
			// 多選后的實際數據
			selectionData() {
				// 先清空數組
				this.multijobData.srv_list = []
				for (const item of this.selectedIndexs) {
					this.multijobData.srv_list.push(this.resData.results[item].job_name);
					// console.log("selectedIndexs: ", this.resData.results[item]);
				}
				// this.multijobData.BRANCH = this.baseFormData.branch
				// this.multijobData.UPDATE = this.baseFormData.update
				console.log("最終提交數據：", this.multijobData)
			},
			//批量删除
			delTable() {
				console.log("批量刪除：", this.selectedItems())
			},
			// 分页触发
			change(e) {
				// this.$refs.table.clearSelection()
				// this.selectedIndexs.length = 0
				// this.getData(e.current)
				// console.log("分页触发：", e)
				this.getTableData(this.baseFormData.env, this.pageSize, e.current, "auto")
				this.$refs.tableRef.clearSelection()
			},
			// checkbox 分页触发
			change_checkbox(e) {
				// this.$refs.table.clearSelection()
				// this.selectedIndexs.length = 0
				// this.getData(e.current)
				// console.log("分页触发：", e)
				this.getTableData(this.baseFormData.env, this.pageSize, e.current, "manual")
				console.log("this.$refs.tableRef: ", this.$refs.tableRef.clearSelection())
				this.$refs.tableRef.clearSelection()
			},
			// 分支下拉框 change 事件
			change_select(e) {
				console.log("change_select:", e)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 消息彈出
			// messageToggle(type, msg) {
			// 	this.msgType = type
			// 	this.messageText = `${msg}`
			// 	this.$refs.message.open()
			// 	console.log("this.$refs", this.$refs)
			// 	console.log("this.$refs.message", this.$refs.message)
			// },
			messageToggle(type, msg) {
			  uni.showToast({
			    title: msg,
			    icon: type === 'success' ? 'success' : 'error',
			    duration: 2000,
			    mask: false
			  })
			}
		},
		mounted() {
			this.getTableData(this.baseFormData.env, this.pageSize, this.pageCurrent, 'auto')
			this.branchList()
		}
	}
</script>

<style>

</style>